<template>
	<view class="home-index">
		<scroll-view scroll-y class="scroll-wrap">
      <!-- 搜索框 -->
      <search-input />
      <!-- /搜索框 -->
      <!-- 轮播图 -->
      <swiper
        class="swiper-content"
        indicator-dots
        autoplay 
        circular
        indicator-color="#fff"
        indicator-active-color="#eb4450"
      >
        <swiper-item
          v-for="(item, index) in swiperList"
          :key="index"
        >
          <image :src="item.image_src" mode="widthFix"></image>
        </swiper-item>
      </swiper>
      <!-- /轮播图 -->
      <!-- 导航菜单 -->
      <view class="home-cate">
        <navigator 
          class="home-cate-item"
          url="/pages/category/category"
          v-for="(item, index) in catitems"
          :key="index"
          open-type="switchTab"
        >
          <image class="cate-item-img" :src="item.image_src" mode="widthFix"></image>
        </navigator>
      </view>
      <!-- /导航菜单 -->
      <!-- 楼层 -->
      <view class="home-floor">
        <view class="home-floor-item" v-for="(item, index) in floor" :key="index">
          <view class="floor-item-title">
            <image :src="item.floor_title.image_src" mode="widthFix"></image>
          </view>
          <view class="floor-item-content">
            <view class="floor-content-item" v-for="(item, index) in item.product_list" :key="index">
              <image :src="item.image_src" mode="widthFix"></image>
            </view>
          </view>
        </view>
      </view>
      <!-- /楼层 -->
		</scroll-view>
	</view>
</template>

<script>
  import searchInput from '@/components/searchInput.vue'
  import { bannerList, homeCate, homeFloor } from '@/utils/request.js'
	export default {
		data() {
			return {
        swiperList: [], // 轮播图
        catitems: [], // 导航菜单
        floor: [], // 楼层
			}
		},
    components: {
      searchInput
    },
		onLoad() {
      this.loadData()
		},
		methods: {
      // 跳转到搜索中心
      handleToSearch () {
        uni.navigateTo({
          url: '/pages/search/search'
        })
      },
      
      // 加载首页数据
      loadData () {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
          mask: true
        })
        Promise.all([bannerList(), homeCate(), homeFloor()]).then((res) => {
          // 轮播图
          if (res[0].statusCode === 200) {
            this.swiperList = res[0].data.message
          }
          // 导航菜单
          if (res[1].statusCode === 200) {
            this.catitems = res[1].data.message
          }
          // 楼层
          if (res[2].statusCode === 200) {
            this.floor = res[2].data.message
          }
        })
      }
		}
	}
</script>

<style lang="less" scoped>
  .scroll-wrap {
    height: calc(100vh - 44px);
    // 轮播图
    .swiper-content {
      width: 750rpx;
      height: 340rpx;
      swiper-item {
        image { 
          width: 100%;
        }
      }
    }
    // 导航菜单
    .home-cate {
      display: flex;
      .home-cate-item {
        flex: 1;
        padding: 20rpx;
        image {
          width: 100%;
        }
      }
    }
    // 楼层
    .home-floor {
      .home-floor-item {
        .floor-item-title {
          padding: 10rpx 0;
          image {
            width: 100%;
          }
        }
        .floor-item-content {
          .floor-content-item {
            float: left;
            width: 250rpx;
            &:nth-last-child(-n+4) {
              height: calc(250rpx * 386 / 232 / 2);
              border-left: 10rpx solid #fff;
            }
            &:nth-child(2),
            &:nth-child(3) {
              border-bottom: 10rpx solid #fff;
            }
            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
</style>
